html,body{
	background: #fff;
    font-family: sans-serif;
}
input{
	outline: none;
	border: 0;
}
#app{
	height: 100%;
}

.wrap{
	height: 100%;
	display: flex;
	flex-direction: column;
}

// 头部
header{
	width: 100%;
	height: .5rem;
	background: #F9F9F9;
	display: flex;
	justify-content: space-around;
	align-items: center;
	.location_icon{
		display: flex;
		justify-content: center;
		align-items: center;
		img{
			width: .16rem;
			height: .20rem;
			margin-right: 3px;
		}
		span{
			font-size: .2rem;
		}
	}
	input{
		height: .28rem;
		width: 55%;
		border-radius: 14px;
		padding: 3px 20px;
		font-size: 12px;
	}
	.home_page{
		display: flex;
		justify-content: center;
		img{
			width: 25px;
			height: 25px;
		}
	}
}

// main
main{
	flex: 1;
	overflow: auto;
	.head, 
	.foot {
	display: flex;
	align-items: center;
	justify-content: center;
	height: .4rem;
	}
	.head img,
	.foot img {
	width: .16rem;
	height: .16rem;
	transition: transform 150ms;
	-webkit-transition: transform 150ms;
	}
	.head img {
	transform: rotate(180deg);
	}
	.up {
	transform: rotate(360deg) !important;
	-webkit-transform: rotate(360deg) !important;
	}
	.down {
	transform: rotate(180deg);
	}
	.banner{
		width: 100%;
		img{
			width: 100%;
		}
	}
	nav ul{
		width: 100%;
		height: 100%;
		padding: 10px 5px;
		display: flex;
		justify-content: center;
		align-content: center;
		flex-wrap: wrap;
		li{
			width: 25%;
			margin-top: 10px;
			display: flex;
			flex-direction: column;
			align-items: center;
			img{
				width: .32rem;
				height: .32rem;
				margin-bottom: .02rem;
			}
			span{
				text-align: center;
				font-size: 12px;
			}
		}
	}
	.preferential_wrap{
		width: 100%;
		padding: 8px 0;
		img{
			width: 100%;
		}
	}
	section{
		.star_wrap{
			margin-top: .1rem;
			.star_head{
				width: 100%;
				padding: 5px 15px;
				display: flex;
				justify-content: space-between;
				align-items: center;
				h3{
					font-size: 18px;
				}
				a{
					font-size: 12px;
					color: rgb(179, 178, 178);
				}
			}
			.star_list_wrap{
				width: 100%;
				overflow: auto;
				padding: 5px 15px;
				display: flex;
				.star_list{
					width: 230px;
					height: 125px;
					background: #fff;
					border-radius: 5px;
					padding: 10px;
					font-size: 12px;
					box-shadow: 0px 2px 8px #ccc;
					margin-right: 10px;
					article{
						height: 80px;
						display: flex;
						justify-content: space-around;
						align-items: center;
						img{
							width: 55px;
							height: 55px;
							border-radius: 50%;
						}
						div{
							width: 200px;
							padding-left: 5px;
							display: flex;
							flex-direction: column;
							b{
								font-weight:normal;
								font-size: 18px;
							}
						}
						p{
							width: 110px;
							height: 25px;
							border-radius: 15px;
							border: 1px solid rgb(250, 64, 166);
							text-align: center;
							line-height: 25px;
							color: rgb(250, 64, 166);
						}
					}
					section{
						display: flex;
						padding: 8px 0;
						border-top: 1px solid #ccc;
						justify-content: space-between;
					}
				}
			}
		}
		 
	}
	#list{
		height: 100%;
		li{
			height: 1.2rem;
			padding: 0 15px;
			margin: 18px 0;
			display: flex;
			justify-content: center;
			img{
				width: .91rem;
				height: 1.21rem;
			}
			.list_information{
				padding-left: .12rem;
				height: 1.21rem;
				position: relative;
				h3{
					text-align: justify;
					font-size: .16rem;
					overflow : hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 3;
					-webkit-box-orient: vertical;
				}
				p{
					font-size: .12rem;
					color: #aaa;
					overflow : hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 1;
					-webkit-box-orient: vertical;
				}
				>span{
					position: absolute;
					bottom: 0;
					font-size: .14rem;
					color: #ff1268;
				}
			}
		}

	}

	
}